<template>
	<div class="app-container" v-loading="data.mtloading">

		<el-form :model="data.info" class="w-full" :label-width="language == 'en' ? '160' : '130'" ref="ruleFormRef">

			<el-form-item :label="$t('machine.marketing.Gift') + ':'" prop="gift_out_type" class="w-1/2">
				<el-select v-model="data.info.gift_out_type" placeholder="Select" size="large" style="width: 240px">
					<el-option :label="$t('machine.marketing.unmodify')" value="0" />
					<el-option :label="$t('machine.marketing.separate')" value="1" />
					<el-option :label="$t('machine.marketing.follow')" value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('machine.marketing.freeGift') + ':'" prop="gift_sell_out" class="w-1/2">
				<el-select v-model="data.info.gift_sell_out" placeholder="Select" size="large" style="width: 240px">
					<el-option :label="$t('machine.marketing.unmodify')" value="0" />
					<el-option :label="$t('public.opens')" value="1" />
					<el-option :label="$t('public.closes')" value="2" />
				</el-select>
				<el-button class="ml-2" type="primary" @click="getimg('newsurprise1zh')">{{
					$t('machine.marketing.sketchMap') }}</el-button>
			</el-form-item>

			<el-form-item :label="$t('machine.marketing.surpriseGift') + ':'" prop="surprise_sell_out" class="w-1/2">
				<el-select v-model="data.info.surprise_sell_out" placeholder="Select" size="large" style="width: 240px">
					<el-option :label="$t('machine.marketing.unmodify')" value="0" />
					<el-option :label="$t('public.opens')" value="1" />
					<el-option :label="$t('public.closes')" value="2" />
				</el-select>
				<el-button class="ml-2" type="primary" @click="getimg('newsurprise1zh')">{{
					$t('machine.marketing.sketchMap') }}</el-button>
			</el-form-item>

			<el-form-item :label="$t('machine.marketing.probability') + ':'" prop="surprise_probability" class="w-1/2">
				<el-select v-model="data.info.surprise_probability" placeholder="Select" size="large"
					style="width: 240px">
					<el-option :label="$t('machine.marketing.unmodify')" value="0" />
					<el-option :label="$t('public.opens')" value="1" />
					<el-option :label="$t('public.closes')" value="2" />
				</el-select>
				<el-button class="ml-2" type="primary" @click="getimg('newsurprise2zh')">{{
					$t('machine.marketing.sketchMap') }}</el-button>
			</el-form-item>

			<el-form-item :label="$t('machine.marketing.promotion') + ':'" prop="fd_hint" class="w-1/2">
				<el-select v-model="data.info.fd_hint" placeholder="Select" size="large" style="width: 240px">
					<el-option :label="$t('machine.marketing.unmodify')" value="0" />
					<el-option :label="$t('public.opens')" value="1" />
					<el-option :label="$t('public.closes')" value="2" />
				</el-select>
				<el-button class="ml-2" type="primary" @click="getimg('sketch_map_zh')">{{
					$t('machine.marketing.sketchMap') }}</el-button>
			</el-form-item>

			<el-form-item :label="$t('machine.marketing.Applicable') + ':'" prop="grouping" class="w-1/2"
				v-prmis="'machine_group_mg_getList'">

				<el-cascader :placeholder="$t('message.selectGroup')" style="width:40%;margin-right: 1%;" clearable
					:props="propss" v-model="data.groupValue" @change="getmping($event, 1)"
					@visible-change="onVisibleChange" />

				<el-select v-model="data.macping" :placeholder="$t('message.pleaseMachine')" clearable filterable
					style="width:40%;" @change="getmping($event, 2)">
					<el-option v-for="item in data.maclist" :key="item.m_id"
						:label="item.machine_id + '-' + item.machine_name" :value="item.machine_id" />
				</el-select>

				<div class="w-full dashed mt-2 p-2" v-if="data.grouping.length != 0">
					<el-tag v-for="item, key of data.grouping" :key="key" closable :disable-transitions="false"
						class="mr-2" :type="item.mg_id == undefined ? '' : 'warning'" size="large"
						@close="handleClose(key)">
						{{ item.machine_id || '' }}{{ item.mg_name || item.label || ' - ' + item.machine_name }}
					</el-tag>
				</div>

			</el-form-item>

			<div class="w-1/2 text-center mt-6">
				<div class="inline-block">
					<el-button type="primary" @click="submit" v-prmis="'machine_group_mg_getList'">{{
						$t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>
		</el-form>
		<!-- 示意图 -->
		<el-dialog v-model="data.demonstrate" center width="30%">
			<div>
				<el-image :src="imagesMap[data.imgName]" fit="fill" />
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import imagesMap from '@/assets/images_Js.ts';
import { getmachineList, updateMoreMc } from '@/api/machine';
import { getgroupList, getListgroupmg } from "@/api/machine_type";
import { useRouter } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
const router = useRouter()
let data = reactive({
	groupValue: [],
	nodesData: [],
	mtloading: false, // 加载
	demonstrate: false, // 示意图
	imgName: '', // 示意图名称

	maclist: [], // 设备列表

	macgrouping: [], // 设备分组
	bindmacping: [], // 设备分组绑定的设备
	grouping: [], // 展示分组/设备
	macping: '', // 选中的分组/设备

	info: {
		gift_out_type: '0',
		gift_sell_out: '0',
		surprise_sell_out: '0',
		surprise_probability: '0',
		fd_hint: '0',
	},

})

const propss = reactive(
	{
		checkStrictly: true,
		lazy: true,
		multiple: false,
		async lazyLoad(node: any, resolve: any) {
			const { level, value } = node
			let nodes = await getgroupList({ pid: value });
			if (nodes.state == 100 || nodes.state == 300) {
				resolve([]);
			}
			const nodesa = nodes.data.map((item) => ({
				value: item.mg_id,
				label: item.mg_id + '-' + item.mg_name
			}))
			nodes.data.forEach(item => {
				data.nodesData.push({
					value: item.mg_id,
					label: item.mg_id + '-' + item.mg_name
				})
			})
			resolve(nodesa);
		}
	}
)
let geturlinfo = async () => {

	// 获取设备信息
	await getmachineList().then(res => {
		if (res.state == 200) {
			data.maclist = res.data
		}
	})

	// 获取设备分组
	await getgroupList().then(res => {
		if (res.state == 200) {
			data.macgrouping = res.data
		}
	})

	// 获取分组中的设备
	await getListgroupmg().then(res => {
		if (res.state == 200) {
			data.bindmacping = res.data
		}
	})

}
let onVisibleChange = () => {
	data.groupValue = []
}
// 选中分组/设备
let getmping = (e, k) => {
	let obj = ''
	let status = true
	if (k == 1) {
		// 分组
		data.nodesData.map((item) => {
			if (item.value === e[e.length - 1]) obj = item
		})
		for (let item of data.grouping) {
			if (item.value == obj.value) {
				status = false
			}
		}
	} else {
		// 设备
		data.maclist.map((item) => { if (item.machine_id === e) obj = item })
		for (let item of data.grouping) {
			if (item.m_id == obj.m_id) {
				status = false
			}
		}
		data.macping = ''
	}
	if (status) {
		data.grouping.push(obj)
	}
}

// 删除选中的设备分组/设备
let handleClose = (e) => {
	data.grouping.splice(e, 1)
}

// 点击查看示意图
let getimg = (e) => {
	data.imgName = e
	data.demonstrate = true
}

// 保存
let submit = () => {

	let machine = []

	if (data.grouping.length == 0) {
		ElMessage({
			message: $t('message.pleaseSelectMachine'),
			type: 'error'
		})
		return
	}

	if (data.grouping.length != 0) {
		let grouping = []
		for (let item of data.grouping) {
		// 设备
			if (item.mg_id != undefined) {
				data.bindmacping.map((ime) => {
					if (item.mg_id === ime.mg_id) {
						grouping.push(ime.m_id)
					}
				})
			}

			if (item.m_id != undefined) {
				grouping.push(item.m_id)
			}
			// 设备分组
			if (item.value != undefined) {
				data.bindmacping.map((ime) => {
					if (item.value === ime.mg_id) {
						if(ime.m_id !== undefined){
							grouping.push(ime.m_id)
						}	
					}
				})
			}
		}
		// 设备分组放入指定设备中
		machine = [...machine, ...grouping]
	}

	// 去除重复的设备编号
	machine = [...new Set(machine)]

	let array = []
	for (let i = 0; i < machine.length; i++) {
		let dataObj = {
			m_id: machine[i]
		}
		if (data.info.gift_out_type !== '0') {
			dataObj.gift_out_type = data.info.gift_out_type
		}
		if (data.info.gift_sell_out !== '0') {
			dataObj.gift_sell_out = data.info.gift_sell_out
		}
		if (data.info.surprise_sell_out !== '0') {
			dataObj.surprise_sell_out = data.info.surprise_sell_out
		}
		if (data.info.surprise_probability !== '0') {
			dataObj.surprise_probability = data.info.surprise_probability
		}
		if (data.info.fd_hint !== '0') {
			dataObj.fd_hint = data.info.fd_hint
		}
		array.push(dataObj)
	}
	data.mtloading = true
	setTimeout(() => {
		data.mtloading = false
	}, 3000)
	updateMoreMc({ mcList: array }).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			ElMessage({
				message: $t('message.modifySuccess'),
				type: 'success'
			})
			cancell()
			return
		}
	})
}

// 取消
let cancell = () => {
	data.info = {
		gift_out_type: '0',
		gift_sell_out: '0',
		surprise_sell_out: '0',
		surprise_probability: '0',
		fd_hint: '0',
	}
	data.grouping = []
}


geturlinfo()

</script>
<style type="text/css">
.dashed {
	border: 2px dashed var(--el-border-color);
}

.el-form-item__label {
	/* line-height: 20px; */
	text-align: right;
}
</style>